<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel" class="ChartDataModelDesign">
        <div class="report">
            <div class="add">
                <a-form ref="form" :model="mdl" layout="vertical">
                    <a-form-item :label="i18n('form.modelName','模型名称')" name="name">
                        <a-input :placeholder="i18n('form.modelName','模型名称')" v-model:value="mdl.name"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.classify','分类')" name="categoryId">
                        <rx-category-select cat-key="SCREEN" :isGrant="true" v-model="mdl.categoryId" :appId="appId"></rx-category-select>
                    </a-form-item>
                    <a-form-item :label="i18n('form.dataSource','数据源')" name="dataSource">
                        <rx-input-button v-model="mdl.dataSource" :singleValue="false" @btnClick="openDataSource" optionLabel="text" ></rx-input-button>
                    </a-form-item>
                    <a-form-item :label="i18n('form.mode','模式')">
                        <a-radio-group v-model:value="dataModeType" @change="typeChange">
                            <a-radio value="table">{{ i18n('form.tableConfig', '表配置') }}</a-radio>
                            <a-radio value="sql">{{ $ti18('rxForm.customSQL', '自定义SQL') }}</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item :label="$ti18('rxForm.alias', '标识')" v-if="mdl.mode=='sql'">
                        <a-input :placeholder="$ti18('rxForm.alias', '标识')" v-model:value="sqlAlias"
                                 @blur="sqlAliasBlur(sqlAlias)"/>
                    </a-form-item>
                    <a-form-item :label="i18n('form.table','表')" v-if="mdl.mode=='table'">
                        <a-input v-model:value="search" :placeholder="i18n('msa.keywordMsa','输入关键字查询')"
                                 @change="fuzzySearch"/>
                    </a-form-item>
                </a-form>
                <div v-if="mdl.mode=='table'">
                    <draggable :list="searchTables" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                               chosenClass="chosenClass" itemKey="key"
                               @end="onEnd" :move="tableMove" :group="{name: 'site',pull:'clone'}">
                        <template #item="{ element }">
                            <div
                                class="item"
                                :key="element.key"
                                :title="element.key"
                            >
                                <div class="drag">
                                    <rx-icon-show class="draggable-icon"
                                                  icon="icon-lineVue3_detail"></rx-icon-show>
                                    <span style="margin-left: 6px;">{{ element.title }}</span>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>
            <div style="display: flex;flex-direction: column">
                <div v-if="mdl.mode=='table'">
                    <div class="tables_obj">
                        {{ i18n('form.tableConfig', '表配置') }}
                    </div>
                    <div>
                        <draggable style="height:200px;overflow:auto;" v-model="tables" group="site" animation="200"
                                   :move="onMove" @add="addTable" itemKey="key">
                            <template #item="{ element:item }">
                                <div class="items">
                                    <div class="neiConfigure" v-if="item.key==tableTree.key">
                                        <div style="overflow:hidden;float: left">
                                            <div class="configureALI"
                                                 @mouseenter="parentMouseenter(tableTree.key)"
                                                 @mouseleave="parentMouseleave('null')" v-if="tableTree.title" :title="tableTree.title">
                                                {{ tableTree.title }}
                                                <div class="deleteTbp" @click="wholeDelete"
                                                     v-if="deleteParent ==tableTree.key">
                                                    <rx-icon-show icon="icon-lineVue3_delete"></rx-icon-show>
                                                </div>
                                            </div>
                                            <LineOutlined  v-if="tableTree.children && tableTree.children.length!=0"/>
                                        </div>
                                        <div style="overflow: hidden">
                                            <TableConfigure v-on:deleteClick="deleteClick" v-on:modification="modification" v-if="tableTree.children" :children="tableTree.children"/>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </draggable>
                    </div>
                </div>
                <div v-else>
                    <div class="tables_obj">
                        <div style="margin-right: 10px;">{{$ti18('rxForm.customSQL','自定义SQL')}}</div>
                        <div style="padding-left:10px;display: flex;align-items: center;justify-content: center">
                            <span style="margin-right: 5px"> {{i18n('form.sqlType','SQL类型')}}:</span>
							<a-radio-group v-model:value="sqlType">
                                    <a-radio value="sql"><div class="tables-radio-span">Sql</div></a-radio>
                                    <a-radio value="groovy"><div class="tables-radio-span">groovySql</div></a-radio>
							</a-radio-group>
						</div>
                    </div>
                    <div v-if="sqlAlias!=''"  style="height: 300px;margin-top: 8px;">
                        <RxVueMonaco
                            :ref="sqlType=='sql'?'sql':'groovySql'"
                            :show-max="false"
                            :value="sql"
                            lineNumbers="off"
                            :folding="false"
                            :showToolbar="true"
                            :language="sqlType=='sql'?'sql' : 'java'"
                            @change="onMonacoChange"
                        >
                            <template #toolbar>
                                <div v-if="sqlType=='sql'">
                                    <span style="padding-left: 5px">
                                        <a-button @click="executeSql">
                                            {{ i18n('form.exeSql', '执行SQL') }}
                                        </a-button>
								    </span>
                                    <span style="padding-left: 5px">
                                        <rx-constant-field @select="insertSql"></rx-constant-field>
                                    </span>
                                </div>
                                <span style="padding-left: 5px" v-if="sqlType=='groovy'">
                                    <span style="padding-left: 5px">
                                        <a-button  @click="executeSql">
                                            {{i18n('form.exeSql','执行SQL')}}
                                        </a-button>
                                    </span>
									<span style="padding-left: 5px">
                                        <a-button @click="showScriptDialog()">
                                            <template #icon>
                                                <rx-icon-show icon="icon-lineedit"/>
                                             </template>
                                            {{i18n('form.quickScript','快速脚本')}}
                                        </a-button>
                                    </span>
                                    <span style="padding-left: 5px">
                                        <rx-constant-field @select="groovySql"></rx-constant-field>
                                    </span>
								</span>
                            </template>
                        </RxVueMonaco>
                    </div>
                    <div v-else style="height: 200px;margin: 8px;">
                        <span>
                          {{ i18n('form.sqlFirst', '请先填写SQL标识!') }}
                        </span>
                    </div>
                </div>
                <div class="tables_obj" style="margin-top: 15px">
                    <span style="flex: 1">{{ i18n('form.modelSet', '数据模型设置') }}</span>
                    <span style="margin-right: 5px;border-right: 1px solid #b6b1b1;padding-right:5px">
                        <a @click="dataPreview">{{ i18n('form.dataPreview', '数据预览') }}</a></span>
                    <span style="margin-right: 5px;border-right: 1px solid #b6b1b1;padding-right:5px">
                        <a @click="addCalField">{{ i18n('form.addCalField', '新增计算字段') }}</a></span>
                    <span><a @click="syncTable">{{ i18n('form.syncTable', '同步表结构') }}</a></span>
                </div>
                <div class="model">
                    <div class="model_chart"><span style="flex: 1">{{ i18n('form.dimension', '维度') }}</span>
                        <a style="margin-right: 10px"
                           @click="unhideAll('dimension')">{{ i18n('form.unHideAll', '隐藏/取消隐藏') }}</a></div>
                    <div class="model_chart"><span style="flex: 1">{{ i18n('form.measure', '度量') }}</span><a
                        style="margin-right: 10px"
                        @click="unhideAll('measure')">{{ i18n('form.unHideAll', '隐藏/取消隐藏') }}</a></div>
                    <div>{{ i18n('form.param', '参数') }}</div>
                </div>
                <div class="model_content">
                    <div>
                        <a-collapse :bordered="false" default-active-key="1" v-for="(dimension,index) in dimensions"
                                    :key="index">
                            <template #expandIcon="props">
                                <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
                            </template>
                            <a-collapse-panel key="1" :header="dimension.tableName">
                                <template #extra >
                                    <span class="checkbox-slot" @click.stop="">
                                        <a-checkbox  @change="allChange($event,index,'dimension')"  ></a-checkbox>
                                    </span>
                                </template>
                                <div style="margin-top: -10px">
                                    <div class="model_obj" v-for="(field,index1) in dimension.fields"
                                         :key="field.fieldName">
                                        <a-checkbox :checked="getCheckBoxValue(index,index1,'dimension')"
                                                    :key="checkboxKey" style="margin-right: 5px;"
                                                    @change="checkboxChange($event,index,index1,'dimension')"></a-checkbox>
                                        <rx-icon-show @mouseenter="mouseenter(index,index1,'dimension')"
                                                      :icon="getIcon(field)" :class="field.hide?'model_decoration':''"
                                                      style="color:#02c5b7;margin-right: 6px"></rx-icon-show>
                                        <span style="font-size: 12px;" :class="{'model_decoration':field.hide}"
                                              @mouseenter="mouseenter(index,index1,'dimension')">{{
                                                field.fieldLabel
                                            }}</span>
                                        <a-dropdown :trigger="['click']" v-if="parentid==index && childrenid==index1">
                                            <rx-icon-show icon="icon-linezhuanhuan"></rx-icon-show>
                                            <template #overlay>
                                                <a-menu :selectedKeys="selectedKeys(field.dataFormat)" class="fonz12"
                                                        v-if="parentid==index && childrenid==index1">
                                                    <template v-if="!field.script">
                                                        <a-menu-item key="switchTo">
                                                            <span @click="switchTo(index,index1,'measure')"
                                                                  class="fonz12">{{ i18n('form.switchMetric', '切换为度量') }}</span>
                                                        </a-menu-item>
                                                        <a-menu-item key="addParam">
                                                            <span @click="addParam(index,index1,'dimension')"
                                                                  class="fonz12">{{ i18n('form.addParam', '添加到参数') }}</span>
                                                        </a-menu-item>
                                                        <a-sub-menu v-if="field.dataType=='date'" class="fonz12"
                                                                    key="dataFormat"
                                                                    :title="i18n('form.dataFormat','数据格式')"
                                                                   >
                                                            <a-menu-item class="fonz12" :key="item.value" v-for="item in dateFormatList"
                                                                         @click="setDataFormat(item.value,index,index1)">
                                                                {{item.label}}
                                                            </a-menu-item>
                                                        </a-sub-menu>
                                                        <a-menu-item key="hideField">
                                                            <span v-if="field.hide"
                                                                  @click="hideField(index,index1,'dimension',false)"
                                                                  class="fonz12">{{ i18n('form.unhide', '取消隐藏') }}</span>
                                                            <span v-else
                                                                  @click="hideField(index,index1,'dimension',true)"
                                                                  class="fonz12">{{ i18n('form.hideField', '隐藏字段') }}</span>
                                                        </a-menu-item>
                                                    </template>
                                                    <template v-else>
                                                        <a-menu-item key="edit">
                                                            <span v-if="field.script"
                                                                  @click="editField(index,index1,'dimension')"
                                                                  class="fonz12">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                                                        </a-menu-item>
                                                        <a-menu-item key="del">
                                                            <span v-if="field.script"
                                                                  @click="delField(index,index1,'dimension')"
                                                                  class="fonz12">{{ $ti18('rxList.delBtn', '删除') }}</span>
                                                        </a-menu-item>
                                                    </template>
                                                </a-menu>
                                            </template>
                                        </a-dropdown>
                                    </div>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <div>
                        <a-collapse :bordered="false" default-active-key="1" v-for="(measure,index) in measures"
                                    :key="index">
                            <template #expandIcon="props">
                                <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
                            </template>
                            <a-collapse-panel key="1" :header="measure.tableName">
                                <template #extra >
                                    <span class="checkbox-slot" @click.stop="">
                                      <a-checkbox  @change="allChange($event,index,'measure')" ></a-checkbox>
                                    </span>
                                </template>
                                <div style="margin-top: -10px">
                                    <div class="model_obj" v-for="(field,index1) in measure.fields"
                                         :key="field.fieldName">
                                        <a-checkbox :checked="getCheckBoxValue(index,index1,'measure')"
                                                    :key="checkboxKey" style="margin-right: 5px;"
                                                    @change="checkboxChange($event,index,index1,'measure')"></a-checkbox>
                                        <rx-icon-show @mouseenter="mouseenter(index,index1,'measure')"
                                                      :icon="getIcon(field)" :class="field.hide?'model_decoration':''"
                                                      style="color:#02c5b7;margin-right: 6px"></rx-icon-show>
                                        <span style="font-size: 12px;" :class="{'model_decoration':field.hide}"
                                              @mouseenter="mouseenter(index,index1,'measure')">
                                            {{field.fieldLabel }}
                                        </span>
                                        <a-dropdown :trigger="['click']"
                                                    v-if="MRparentid==index && MRchildrenid==index1">
                                            <rx-icon-show icon="icon-linezhuanhuan" class="icon_ringht"></rx-icon-show>
                                            <template #overlay>
                                                <a-menu :selectedKeys="selectedKeys(field.aggregate)" class="fonz12"
                                                        v-if="MRparentid==index && MRchildrenid==index1">
                                                    <a-sub-menu key="aggregate" class="fonz12"
                                                                :title="i18n('form.polymerize','聚合') + '('+field.aggregate+')'">
                                                        <a-menu-item :key="item.value" class="fonz12" v-for="item in aggregates"
                                                                     @click="setAggregate(item.value,index,index1)">
                                                            {{item.label}}
                                                        </a-menu-item>
                                                    </a-sub-menu>
                                                    <template v-if="!field.script">
                                                        <a-menu-item key="switchTo">
                                                            <span @click="switchTo(index,index1,'dimension')"
                                                                  class="fonz12">{{ i18n('form.toDimension', '切换为维度') }}</span>
                                                        </a-menu-item>
                                                        <a-menu-item key="addParam">
                                                            <span @click="addParam(index,index1,'measure')"
                                                                  class="fonz12">{{ i18n('form.addParam', '添加到参数') }}</span>
                                                        </a-menu-item>
                                                        <a-menu-item key="hideField">
                                                            <span v-if="field.hide"
                                                                  @click="hideField(index,index1,'measure',false)"
                                                                  class="fonz12">{{ i18n('form.unhide', '取消隐藏') }}</span>
                                                            <span v-else @click="hideField(index,index1,'measure',true)"
                                                                  class="fonz12">{{ i18n('form.hideField', '隐藏字段') }}</span>
                                                        </a-menu-item>
                                                    </template>
                                                    <template v-else>
                                                        <a-menu-item key="edit">
                                                            <span v-if="field.script"
                                                                  @click="editField(index,index1,'measure')"
                                                                  class="fonz12">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                                                        </a-menu-item>
                                                        <a-menu-item key="del">
                                                            <span v-if="field.script"
                                                                  @click="delField(index,index1,'measure')"
                                                                  class="fonz12">{{ $ti18('rxList.delBtn', '删除') }}</span>
                                                        </a-menu-item>
                                                    </template>
                                                </a-menu>
                                            </template>
                                        </a-dropdown>
                                    </div>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                    <div>
                        <a-collapse :bordered="false" default-active-key="1" v-for="(param,index) in params"
                                    :key="index">
                            <template #expandIcon="props">
                                <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
                            </template>
                            <a-collapse-panel key="1" :header="param.tableName">
                                <div style="margin-top: -10px">
                                    <div class="model_obj" v-for="(field,index1) in param.fields"
                                         :key="field.fieldName">
                                        <rx-icon-show @mouseenter="mouseenter(index,index1,'param')"
                                                      :icon="getIcon(field)"
                                                      style="color:#02c5b7;margin-right: 6px"></rx-icon-show>
                                        <span style="font-size: 12px;" @mouseenter="mouseenter(index,index1,'param')">
                                            {{field.fieldLabel}}</span>
                                        <a-dropdown :trigger="['click']"
                                                    v-if="paramsParentId==index && paramsId==index1">
                                            <rx-icon-show icon="icon-linezhuanhuan" class="icon_ringht"></rx-icon-show>
                                            <template #overlay>
                                                <a-menu :selectedKeys="selectedKeys(field.comparison)" class="fonz12"
                                                        v-if="paramsParentId==index && paramsId==index1">
                                                    <a-sub-menu key="comparison" class="fonz12"
                                                                :title="i18n('form.assoMethod','关联方式') + '('+field.comparison+')'">
                                                        <template v-if="field.dataType=='date'">
                                                            <a-menu-item :key="item.value" class="fonz12" v-for="item in dateComparisonList" @click="setComparison(item.value,index,index1)">
                                                                {{item.label}}
                                                            </a-menu-item>
                                                        </template>
                                                        <template v-else>
                                                            <a-menu-item :key="item.value" class="fonz12" v-for="item in comparisonList" @click="setComparison(item.value,index,index1)">
                                                                {{item.label}}
                                                            </a-menu-item>
                                                        </template>
                                                    </a-sub-menu>
                                                    <a-menu-item key="delParams">
                                                        <span @click="delParams(index,index1)"
                                                              class="fonz12">{{ $ti18('rxList.delBtn', '删除') }}</span>
                                                    </a-menu-item>
                                                </a-menu>
                                            </template>
                                        </a-dropdown>
                                    </div>
                                </div>
                            </a-collapse-panel>
                        </a-collapse>
                    </div>
                </div>
            </div>
        </div>

        <a-modal v-if="relatedPartys.length>0" v-model:open="visible" :title="i18n('form.tableAsso','表关联')" @ok="modalOk"
                 :cancelText="$ti18('rxForm.cancelBtn','取消')"
                 :okText="$ti18('rxForm.okBtn','确认')"
                 @cancel="modalCancel" :zIndex="9999" :width="570">
            <div class="association">
                <div style="display: flex;">
                    <div style="flex: 2">
                        <!--关联方-->
                        <a-select style="width: 150px" :placeholder="i18n('form.relateParty','关联方')"
                                  @change="handleChange"
                                  v-model:value="relatedKey"
                                  :default-value="relatedPartys[0].key"
                                  :getPopupContainer="p=>p.parentNode">
                            <a-select-option v-for="(item,index) in relatedPartys"  :key="index" :value="item.key">
                                <a-tooltip :overlayStyle="{zIndex:999999}">
                                    <template #title>
                                        <span>{{ item.title }}</span>
                                    </template>
                                    <span>{{ item.title }}</span>
                                </a-tooltip>
                            </a-select-option>
                        </a-select>
                        <!--关联方式-->
                        <a-select style="margin-left: 20px; width: 150px" @change="joinChange"
                                  :placeholder="i18n('form.assoMethod','关联方式')" default-value="left"
                                  v-model:value="curJoin"
                                  :getPopupContainer="p=>p.parentNode">
                            <a-select-option value="left">{{ i18n('form.leftConnect', '左连接') }}</a-select-option>
                            <a-select-option value="inner">{{ i18n('form.inConnect', '内连接') }}</a-select-option>
                            <a-select-option value="full">{{ i18n('form.fullConnect', '全连接') }}</a-select-option>
                        </a-select>
                    </div>

                    <!--当前方-->
                    <div class="current" :title="moveKey">
                        <a-tooltip :overlayStyle="{zIndex:999999}">
                            <template #title>
                                <span>{{moveKey}}</span>
                            </template>
                            <span class="current-text">{{ moveKey }}</span>
                        </a-tooltip>
                    </div>
                </div>

                <!-- 关联条件-->
                <div>
                    <!--展示关系-->
                    <div class="exhibition"><span>{{ i18n('form.assoRelate', '关联关系') }}</span></div>
                    <div v-for="(on,index) in curJoinOn" :key="index" style="margin-bottom: 20px">
                        <a-select style="width: 224px" :placeholder="i18n('form.relateParty','关联方')"
                                  v-model:value="on.leftField" @dropdownVisibleChange="selectFields('related')"
                                  :getPopupContainer="p=>p.parentNode" allowClear>
                            <a-select-option :key="field.fieldName" v-for="field in relatedFields">
                                {{ field.fieldLabel }}
                            </a-select-option>
                        </a-select>
                        <span style="margin-left: 17px;margin-right: 17px;">=</span>
                        <a-select style="width: 224px" :placeholder="i18n('form.currentParty','当前方')"
                                  @dropdownVisibleChange="selectFields()"
                                  v-model:value="on.rightField"
                                  :getPopupContainer="(p)=>p.parentNode" allowClear>
                            <a-select-option :key="field.fieldName" v-for="field in curFields">{{ field.fieldLabel }}
                            </a-select-option>
                        </a-select>
                        <!-- 删除按钮-->
                        <rx-icon-show icon="icon-linedelete" @click="delJoinOn(index)"/>
                    </div>
                    <!-- 添加按钮图标-->
                    <div class="addTo"><rx-icon-show icon="icon-lineaddition"  @click="addJoinOn"/></div>
                </div>
            </div>
        </a-modal>
        <a-modal v-model:open="showSyncTable"
                 :title="i18n('form.syncTable','同步表结构')"
                 @ok="syncTable()"
                 @cancel="showSyncTable=false"
                 :cancelText="$ti18('rxForm.cancelBtn','取消')"
                 :okText="$ti18('rxForm.okBtn','确认')"
                 :zIndex="99999"
                 :width="570">
            <p> {{ i18n('msa.syncAll', '同步表结构会同步所有表新增或删除的字段!') }}</p>
            <p>{{ i18n('msa.notSync', '所有表字段类型变更不会被同步，原有数据集关联模型不受影响') }}</p>
            <p>{{ i18n('msa.sureSync', '确定同步吗？') }}</p>
        </a-modal>
    </rx-dialog>
</template>
<script>
import ScreenDataModelApi from '@/api/screen/core/screen-data-model'
import {RxDialog, RxInputButton, Util, RxVueMonaco,JsConstant} from '@lowcode/jpaas-base-lib';
import { ShareDialog,RxCategorySelect,RxConstantField } from '@lowcode/jpaas-share-component';
import TableConfigure from './table-configure.vue'
import draggable from 'vuedraggable'
import designJs from './js/design-js'
import {mapState} from 'pinia';
import useMain from "../../../../stores/use-main";
import CalFieldDialog from "@/views/modules/screen/dialog/cal-field-dialog.vue"
import DataPreviewDialog from "@/views/modules/screen/dialog/data-preview-dialog.vue";


export default {
    name: 'ScreenDataModelDesign',
    mixins: [designJs],
    components: {
        RxDialog,
        RxInputButton,
        RxCategorySelect,
        RxVueMonaco,
        draggable,
        TableConfigure,
        RxConstantField
    },
    props: {
        destroy: {
            type: Function
        },
        dataMode: {
            type: Object
        }
    },
    computed: {
        ...mapState(useMain, ['appId'])
    },
    data() {
        return {
            mdl: {
                name: "table",
                categoryId: "",
                mode: "",
                dataSource: "",
            },
            //所有的表
            allTables: [],
            //选择的表
            tables: [],
            //拖拽前的表配置
            oldTables: [],
            //数据源
            ds: "",
            //查询的表
            searchTables: [],
            search: "",
            dimensionEdit: null,
            measureEdit: null,
            moveKey: "",
            visible: false,
            //关联方
            relatedPartys: [],
            //关联方字段
            relatedFields: [],
            //当前方字段
            curFields: [],
            //当前方关联条件
            curJoinOn: [],
            //表配置树对象
            tableTree: {},
            //选中删除key
            deleteId: [],
            deleteParent: '',
            relatedKey: '',
            curJoin: '',
            //标记是点击出的弹窗
            openFalg: false,
            dataModeType: "table",
            sqlAlias: "",
            sql: null,
            //sql类型
            sqlType:"sql",
            rules: {
                name: [{required: true, message: this.i18n('form.modelName', '模型名称'), trigger: 'change'}],
                dataSource: [{required: false, message: this.i18n('form.dataSource', '数据源'), trigger: 'change'}],
                categoryId: [{required: true, message: this.i18n('form.classify', '分类'), trigger: 'change'}]
            },
            //同步表结构确认框
            showSyncTable: false,
            //需要隐藏的字段
            checkboxList: [],
            checkboxKey: "",
            labelCol: {span: 7},
            wrapperCol: {span: 17},
        }
    },
    created() {
        this.init();
    },
    methods: {
        parentMouseenter(key) {
            this.deleteParent = key
        },
        parentMouseleave(name) {
            this.deleteParent = name
        },
        //全部删除表配置
        wholeDelete() {
            this.tableTree = {};
            this.tables = [];
            this.dimensions = [];
            this.measures = [];
            this.params = [];
        },
        getTables(dsAlias) {
            ScreenDataModelApi.getTables("tableName=&ds=" + dsAlias).then(res => {
                if (res.length > 0) {
                    this.allTables = res;
                }
            });
        },
        init() {
            //清空复选框内容
            this.checkboxList = [];
            this.checkboxKey = Util.randomId();
            this.mdl = this.dataMode
            //根据数据源获取表
            if (this.dataMode && this.dataMode.dataSource) {
                let dataSource = JSON.parse(this.dataMode.dataSource);
                if (dataSource.value) {
                    this.searchTables = [];
                    this.ds = dataSource.value;
                    this.getTables(this.ds);
                }
            } else {
                this.getTables("");
            }
            //数据模型配置
            if (this.dataMode && this.dataMode.modelConfig) {
                let modelConfig = JSON.parse(this.dataMode.modelConfig);
                this.dimensions = modelConfig.dimensions;
                this.measures = modelConfig.measures;
                this.params = modelConfig.params;
            }
            if (this.dataMode && this.dataMode.tables) {
                this.tables = JSON.parse(this.dataMode.tables);
                this.relatedPartys = JSON.parse(this.dataMode.tables);
            }
            //默认表配置
            if (!this.dataMode.mode) {
                this.mdl.mode = "table"
            }
            //默认表配置
            if (!this.dataMode.sourceType) {
                this.mdl.sourceType = "dataSource";
            }
            this.dataModeType = this.dataMode.mode;
            if (this.dataModeType == 'sql') {
                if (this.dataMode.sqlModel) {
                    let sqlModel = JSON.parse(this.dataMode.sqlModel);
                    this.sqlAlias = sqlModel.sqlAlias;
                    this.sql = sqlModel.sql;
                    this.sqlType=sqlModel.sqlType || "sql";
                }
            }
            this.restructure();
            //点击同步按钮初始化关闭对话框
            this.showSyncTable = false;
        },
        //图标
        getIcon(obj) {
            if (obj.dataType == 'string') {
                return 'icon-lineField-String';
            } else if (obj.dataType == 'date') {
                return 'icon-lineriqi2';
            } else  {
                return 'icon-lineshuzi';
            }
        },
        //选择数据源
        openDataSource() {
            let self=this;
            ShareDialog.openDataSourceDialog({
                curVm: this, widthHeight: ['1200px', '600px'],
                data: {appName: JsConstant.JPAAS_LOWCODE}
            }, function (self_, data) {
                let jsonObj = {text: data.name, value: data.alias};
                self.mdl.dataSource = JSON.stringify(jsonObj);
                self.init();
            })
        },
        handleSubmit() {
            this.save(this.mdl);
        },
        cancel() {
            Util.closeWindow(this, 'cancel');
        },
        save(value) {
            let modelConfig = {
                "dimensions": this.dimensions,
                "measures": this.measures,
                "params": this.params
            }
            //sql模式
            if (this.dataModeType == 'sql') {
                if (this.sqlAlias) {
                    value.sqlModel = JSON.stringify({
                        sqlAlias: this.sqlAlias,
                        sql: this.sql,
                        sqlType:this.sqlType
                    })
                    for (let i = 0; i < modelConfig.dimensions.length; i++) {
                        if (modelConfig.dimensions[i].tableName != "CUSTOM_FIELD") {
                            modelConfig.dimensions[i].tableName = this.sqlAlias;
                        }
                    }
                    for (let i = 0; i < modelConfig.measures.length; i++) {
                        if (modelConfig.measures[i].tableName != "CUSTOM_FIELD") {
                            modelConfig.measures[i].tableName = this.sqlAlias;
                        }
                    }
                    value.modelConfig = JSON.stringify(modelConfig);
                } else {
                    value.sqlModel = "";
                    value.modelConfig = "";
                }
            } else {
                value.modelConfig = JSON.stringify(modelConfig);
                value.tables = JSON.stringify(this.tables);
            }
            let appId = this.appId;
            if (appId) {
                value.appId = appId;
            }
            ScreenDataModelApi.save(value).then(res => {
                console.log(res)
                Util.closeWindow(this, 'ok');
            });
        },
        /**
         * 获取维度与度量
         * isSync 是否为同步
         **/
        getFields(alias, sql, isSync) {
            if (this.dataModeType == 'table') {
                sql = "SELECT * FROM " + alias;
            }
            ScreenDataModelApi.getFields({sql: sql, ds: this.ds,sqlType:this.sqlType}).then(res => {
                if (isSync) {
                    this.syncFields(alias, res);
                    return;
                }
                let dimensions = [];
                let measures = [];
                if (this.dataModeType == 'sql') {
                    this.dimensions = [];
                    this.measures = [];
                }
                for (let i = 0; i < res.length; i++) {
                    let dataType = res[i].dataType;
                    let obj = {
                        dataType: res[i].dataType,
                        fieldLabel: res[i].fieldLabel,
                        fieldName: res[i].fieldName
                    };
                    //是否为标准字段
                    let defField = this.defFields.find(item => {
                        if (obj.fieldName == item.fieldName) {
                            return true;
                        }
                    })
                    if (defField) {
                        obj["hide"] = true
                    }
                    //度量
                    if (dataType == "number") {
                        obj["aggregate"] = "SUM";
                        measures.push(obj);
                    }
                    //维度
                    else {
                        //默认日期格式
                        if (obj.dataType == 'date') {
                            obj["dataFormat"] = "YYYY-MM-DD";
                        }
                        dimensions.push(obj);
                    }
                }

                let oldAry = [];
                let index = -1;
                //合并维度
                for (let i = 0; i < this.dimensions.length; i++) {
                    if (Object.keys(this.dimensions[i]) == alias) {
                        oldAry = Object.values(this.dimensions[i]);
                        index = i;
                    }
                }
                dimensions = this.packedArray(oldAry, dimensions);
                let dimension = {
                    tableName: alias,
                    fields: dimensions
                }
                if (index != -1) {
                    this.dimensions[index] = dimension;
                    index = -1;
                } else {
                    this.dimensions.push(dimension);
                }

                //合并度量
                for (let i = 0; i < this.measures.length; i++) {
                    if (Object.keys(this.measures[i]) == alias) {
                        oldAry = Object.values(this.measures[i]);
                        index = i;
                    }
                }
                measures = this.packedArray(this.measures, measures);
                let measure = {
                    tableName: alias,
                    fields: measures
                }
                if (index != -1) {
                    this.measures[index] = measure;
                    index = -1;
                } else {
                    this.measures.push(measure);
                }
            })
        },
        //合并数组  oldAry:原来的数组 newAry:新的数组
        packedArray(oldAry, newAry) {
            //原数组为空
            if (!oldAry || oldAry.length == 0) {
                return newAry;
            }
            //合并后的数据
            let array = [];
            for (let i = 0; i < newAry.length; i++) {
                let flag = true;
                for (let j = 0; j < oldAry.length; j++) {
                    //fieldName相同 则取原来的
                    if (newAry[i].fieldName == oldAry[j].fieldName) {
                        array.push(oldAry[j]);
                        flag = false;
                        break;
                    }
                }
                //未找到fieldName相同时 则取新的
                if (flag) {
                    array.push(newAry[i]);
                }
            }
            return array;
        },
        //模糊查询
        fuzzySearch() {
            let arr = [];
            let reg = new RegExp(this.search.toUpperCase());
            for (let i = 0; i < this.allTables.length; i++) {
                let obj = {
                    title: this.allTables[i].tableName,
                    key: this.allTables[i].tableName,
                    join: {}
                }
                if (this.search) {
                    //转大写
                    let tableName = this.allTables[i].tableName.toUpperCase();
                    if (tableName.match(reg)) {
                        arr.push(obj);
                    }
                }
            }
            this.searchTables = arr;
        },
        //拖拽结束事件
        onEnd(e) {
            let self = this;
            let items = this.tables.filter(function (m) {
                return m.key == self.moveKey;
            })
            if (items.length < 2 && items.length > 0) {
                //两张表后需要配置两张表的关联条件
                if (this.tables.length > 1) {
                    //去除当前方
                    this.relatedPartys.splice(e.newDraggableIndex, 1);
                    this.visible = true;
                    //默认第一个
                    this.tables[e.newDraggableIndex].join.tableName = this.relatedPartys[0].key;
                    this.relatedKey = this.relatedPartys[0].key;
                    this.tables[e.newDraggableIndex].join.type = "left";
                    this.curJoin = "left";
                    this.curJoinOn = this.tables[e.newDraggableIndex].join.on;
                    if (!this.curJoinOn || this.curJoinOn.length == 0) {
                        this.curJoinOn = [];
                        this.curJoinOn.push({
                            leftField: "",
                            rightField: ""
                        })
                    }
                    //将当前的数据放到最后
                    this.oldTables.push(this.tables[e.newDraggableIndex]);
                    this.tables = this.oldTables;
                } else if (this.tables.length == 1) {
                    this.restructure();
                }
                return;
            } else {
                this.tables.splice(e.newDraggableIndex, 1);
            }

        },
        //禁止表配置能够拖拽
        onMove() {
            return false;
        },
        //拖到表配置中
        tableMove(e) {
            this.moveKey = e.draggedContext.element.key;
            return true;
        },
        //表配置新增时触发
        addTable() {
            let self = this;
            if (this.moveKey) {
                let items = this.tables.filter(function (m) {
                    return m.key == self.moveKey;
                })
                if (items.length < 2) {
                    this.getFields(this.moveKey);
                }
            }
        },
        //modal确认
        modalOk() {
            if (this.curJoinOn[0].leftField == '' || this.curJoinOn[0].rightField == '') {
                this.$message.warn(this.i18n('form.assoRelate', '关联关系', 'select'));
                return
            }
            this.visible = false;
            for (let i = 0; i < this.tables.length; i++) {
                if (this.moveKey == this.tables[i].key) {
                    this.tables[i].join.on = this.curJoinOn;
                    break;
                }
            }
            this.restructure()
        },
        //modal取消
        modalCancel() {
            //是否为点击出的弹窗
            if (!this.openFalg) {
                for (let i = 0; i < this.tables.length; i++) {
                    if (this.moveKey == this.tables[i].key) {
                        this.delTable(i);
                        break;
                    }
                }
            }
            this.openFalg = false;
            this.visible = false;
        },
        //删除表配置
        delTable(index) {
            let tableName = this.tables[index].key;
            for (let i = 0; i < this.dimensions.length; i++) {
                if (this.dimensions[i].tableName == tableName) {
                    this.dimensions.splice(i, 1);
                    break;
                }
            }
            for (let i = 0; i < this.measures.length; i++) {
                if (this.measures[i].tableName == tableName) {
                    this.measures.splice(i, 1);
                    break;
                }
            }
            this.tables.splice(index, 1);
        },
        //关联方变化
        handleChange(value) {
            for (let i = 0; i < this.tables.length; i++) {
                if (this.moveKey == this.tables[i].key) {
                    this.tables[i].join.tableName = value;
                    this.curJoinOn = [{
                        leftField: "",
                        rightField: ""
                    }];
                    this.tables[i].join.on = [];
                }
            }
        },
        //关联方式变化
        joinChange(value) {
            for (let i = 0; i < this.tables.length; i++) {
                if (this.moveKey == this.tables[i].key) {
                    this.tables[i].join.type = value;
                    return;
                }
            }
        },
        //点击下拉 获取options
        selectFields(type) {
            let tableName = "";
            this.relatedFields = [];
            this.curFields = [];
            //关联方
            if (type == "related") {
                tableName = this.tables[0].key;
            } else {
                tableName = this.moveKey;
            }
            for (let i = 0; i < this.dimensions.length; i++) {
                if (this.dimensions[i].tableName == tableName) {
                    if (type == "related") {
                        this.relatedFields.push(...this.dimensions[i].fields);
                    } else {
                        this.curFields.push(...this.dimensions[i].fields);
                    }
                }
            }
            for (let i = 0; i < this.measures.length; i++) {
                if (this.measures[i].tableName == tableName) {
                    if (type == "related") {
                        this.relatedFields.push(...this.measures[i].fields);
                    } else {
                        this.curFields.push(...this.measures[i].fields);
                    }
                }
            }
        },
        //新增关联条件
        addJoinOn() {
            this.curJoinOn.push({
                leftField: "",
                rightField: ""
            })
        },
        //刪除关联条件
        delJoinOn(index) {
            this.curJoinOn.splice(index, 1);
        },
        //删除表配置数据
        deleteClick(key) {
            let deleteSubtable = {};
            for (let i = 0; i < this.tableTree.children.length; i++) {
                if (key == this.tableTree.children[i].key) {
                    deleteSubtable = this.tableTree.children[i]
                    this.tableTree.children.splice(i, 1);
                    //拼接deleteId
                    this.deleteTables(deleteSubtable)
                    break;
                }
            }
        },
        //修改表配置数据
        modification(type) {
            let that = this;
            that.visible = true;
            that.moveKey = type.key;
            that.relatedKey = type.join.tableName;
            that.curJoin = type.join.type;
            that.curJoinOn = type.join.on;
            that.openFalg = true;
        },
        deleteTables(style) {
            //删除
            this.deleteId = [];
            this.deleteId.push(style.key);
            if (style.children && style.children.length > 0) {
                this.infiniteDelete(style.children)
            }
            //删除tables里面数据
            this.deleteTablesTid();
        },
        infiniteDelete(style) {
            for (let i = 0; i < style.length; i++) {
                this.deleteId.push(style[i].key);
                if (style[i].children && style[i].children.length != 0) {
                    this.infiniteDelete(style[i].children)
                }
            }
        },
        deleteTablesTid() {
            for (let key of this.deleteId) {
                for (let j = 0; j < this.dimensions.length; j++) {
                    if (this.dimensions[j].tableName == key) {
                        this.dimensions.splice(j, 1);
                        break;
                    }
                }
                for (let k = 0; k < this.measures.length; k++) {
                    if (this.measures[k].tableName == key) {
                        this.measures.splice(k, 1);
                        break;
                    }
                }
                for (let i = 0; i < this.tables.length; i++) {
                    if (key == this.tables[i].key) {
                        this.tables.splice(i, 1);
                        break
                    }
                }
            }
        },
        //重构数据
        restructure() {
            let newTables = {};
            for (let i = 0; i < this.tables.length; i++) {
                if (i == 0) {
                    newTables.key = this.tables[i].key;
                    newTables.title = this.tables[i].title;
                    newTables.join = this.tables[i].join;
                } else {
                    if (this.tables[i].join.tableName == newTables.key) {
                        if (!newTables.children) {
                            newTables.children = [{
                                key: this.tables[i].key,
                                title: this.tables[i].title,
                                join: this.tables[i].join
                            }];
                        } else {
                            newTables.children.push({
                                key: this.tables[i].key,
                                title: this.tables[i].title,
                                join: this.tables[i].join
                            })
                        }
                    } else {
                        let obj = {
                            key: this.tables[i].key,
                            title: this.tables[i].title,
                            join: this.tables[i].join
                        }
                        this.infinite(newTables.children, obj);
                    }
                }
            }
            this.tableTree = newTables;
        },
        //循环重构
        infinite(children, table) {
            for (let i = 0; i < children.length; i++) {
                if (children[i].key == table.join.tableName) {
                    if (!children[i].children) {
                        let obj = [];
                        obj.push(table)
                        children[i].children = obj;
                    } else {
                        children[i].children.push(table)
                    }
                    break;
                } else {
                    if (children[i].children) {
                        this.infinite(children[i].children, table);
                    }
                }
            }
        },
        typeChange(e) {
            this.mdl.mode = e.target.value;
            this.sqlAlias = "";
            this.sql = "";
            this.wholeDelete();
        },
        //SQL语句变化
        executeSql() {
            this.getFields(this.sqlAlias, this.sql);
        },
        /**
         * 同步表结构
         */
        syncTable() {
            this.showSyncTable = !this.showSyncTable;
            if (!this.showSyncTable) {
                //表配置模式
                if (this.mdl.mode == "table" && this.tables) {
                    for (let i = 0; i < this.tables.length; i++) {
                        this.getFields(this.tables[i].key, "", true);
                    }
                } else if (this.mdl.mode == "sql") {
                    this.getFields(this.sqlAlias, this.sql, true);
                }
            }
        },
        /**
         * 同步字段
         * @param tableName
         * @param fields
         */
        syncFields(tableName, fields) {
            //取出字段
            let dimensionsFields = [];
            let measuresFields = [];
            for (let i = 0; i < fields.length; i++) {
                let dataType = fields[i].dataType;
                let obj = {
                    dataType: fields[i].dataType,
                    fieldLabel: fields[i].fieldLabel,
                    fieldName: fields[i].fieldName
                };
                //度量
                if (dataType == "number") {
                    obj["aggregate"] = "SUM";
                    measuresFields.push(obj);
                }
                //维度
                else {
                    //默认日期格式
                    if (obj.dataType == 'date') {
                        obj["dataFormat"] = "YYYY-MM-DD";
                    }
                    dimensionsFields.push(obj);
                }
            }
            //判断新增与删除 不修改类型
            //维度
            for (let i = 0; i < this.dimensions.length; i++) {
                if (this.dimensions[i].tableName == tableName) {
                    dimensionsFields = dimensionsFields.map(item => {
                        let fieldObj = this.dimensions[i].fields.find(field => field.fieldName == item.fieldName);
                        if (fieldObj) {
                            item = fieldObj;
                        }
                        return item;
                    })
                    this.dimensions[i].fields = dimensionsFields;
                    break;
                }
            }
            //度量
            for (let i = 0; i < this.measures.length; i++) {
                if (this.measures[i].tableName == tableName) {
                    measuresFields = measuresFields.map(item => {
                        let fieldObj = this.measures[i].fields.find(field => field.fieldName == item.fieldName);
                        if (fieldObj) {
                            item = fieldObj;
                        }
                        return item;
                    })
                    this.measures[i].fields = measuresFields;
                    break;
                }
            }
            //参数
            for (let i = 0; i < this.params.length; i++) {
                if (this.params[i].tableName == tableName) {
                    let ary = [];
                    this.params[i].fields.map(field => {
                        let obj = fields.find(item => {
                            if (item.fieldName == field.fieldName) {
                                return item;
                            }
                        });
                        if (obj) {
                            ary.push(obj);
                        }
                    });
                    this.params[i].fields = ary;
                    break;
                }
            }
        },
        //新增计算字段
        addCalField() {
            let self = this;
            Util.open({
                component: CalFieldDialog,
                curVm: this,
                widthHeight: ['1000px', '700px'],
                title: this.i18n("form.addCalField", "新增计算字段") + "(JAVA)",
                data: {
                    dimensions: this.dimensions,
                    measures: this.measures
                },
                zIndex:999,
            }, function (action, data) {
                if (action != "ok") return;
                let obj = {
                    fieldLabel: data.label,
                    fieldName: data.alias,
                    script: data.script
                };
                if (data.type == "measure") {
                    let custom = self.measures.find(item => item.tableName == "CUSTOM_FIELD");
                    obj["aggregate"] = "SUM";
                    if (!custom) {
                        self.measures.push({
                            tableName: "CUSTOM_FIELD",
                            fields: [obj]
                        })
                    } else {
                        custom.fields.push(obj);
                    }

                } else {
                    let custom = self.dimensions.find(item => item.tableName == "CUSTOM_FIELD");
                    if (!custom) {
                        self.dimensions.push({
                            tableName: "CUSTOM_FIELD",
                            fields: [obj]
                        })
                    } else {
                        custom.fields.push(obj);
                    }
                }
            });
        },
        sqlAliasBlur(sqlAlias) {
            //转大写
            this.sqlAlias = sqlAlias.toUpperCase();
        },
        //编辑自定义计算字段
        editField(index, index1, type) {
            let obj = "";
            let aggregate = "";
            let self = this;
            if (type == "dimension") {
                obj = self.dimensions[index].fields[index1];
            } else if (type == "measure") {
                obj = self.measures[index].fields[index1];
                aggregate = obj.aggregate;
            }
            let field = {
                label: obj.fieldLabel,
                alias: obj.fieldName,
                script: obj.script,
                type: type
            };
            Util.open({
                component: CalFieldDialog,
                curVm: this,
                widthHeight: ['1000px', '700px'],
                title: this.i18n("form.editCalField", "编辑计算字段") + "(JAVA)",
                data: {
                    dimensions: this.dimensions,
                    measures: this.measures,
                    field: field
                },
                zIndex:999,
            }, function (action, data) {
                if (action != "ok") return;
                let obj = {
                    fieldLabel: data.label,
                    fieldName: data.alias,
                    script: data.script
                };
                if (data.type == "measure") {
                    obj["aggregate"] = aggregate || "SUM";
                    self.measures[index].fields[index1] = obj;
                } else {
                    self.dimensions[index].fields[index1] = obj;
                }
            });
        },
        //删除自定义计算字段
        delField(index, index1, type) {
            let self = this;
            this.$confirm({
                content: this.$ti18('rxMsa.delCurrentInfo', "您确定要删除当前项吗?"),
                zIndex: 40000,
                okText: this.$ti18('rxForm.okBtn', '确定'),
                cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                onOk() {
                    if (type == "dimension") {
                        self.dimensions[index].fields.splice(index1, 1);
                        if (self.dimensions[index].fields.length == 0) {
                            self.dimensions.splice(index, 1);
                        }
                    } else if (type == "measure") {
                        self.measures[index].fields.splice(index1, 1);
                        if (self.measures[index].fields.length == 0) {
                            self.measures.splice(index, 1);
                        }
                    }
                }
            });
        },
        //构建数据 把隐藏的放后面
        buildData(data) {
            if (!data || data.length == 0) {
                return;
            }
            for (let i = 0; i < data.length; i++) {
                let obj = data[i];
                if (!obj.fields) {
                    continue;
                }
                let ary = [];//存放未隐藏的
                let hideAry = [];//存放隐藏的
                for (let j = 0; j < obj.fields.length; j++) {
                    if (obj.fields[j].hide) {
                        hideAry.push(obj.fields[j]);
                    } else {
                        ary.push(obj.fields[j]);
                    }
                }
                ary.push.apply(ary, hideAry);
                obj.fields = ary;
            }
        },
        dataPreview() {
            let modelConfig = {
                "dimensions": this.dimensions,
                "measures": this.measures
            }
            let config = {
                dataSource: this.mdl.dataSource,
                mode: this.mdl.mode,
                modelConfig: JSON.stringify(modelConfig),
                sqlModel: {
                    sqlAlias: this.sqlAlias,
                    sql: this.sql,
                    sqlType:this.sqlType || "sql"
                },
                tables: this.tables ? JSON.stringify(this.tables) : "",
            }
            Util.open({
                component: DataPreviewDialog,
                curVm: this,
                title: this.i18n('form.dataPreview', '数据预览') + "(" + this.i18n('form.defaultNum', '默认1000条数据') + ")",
                max: true,
                data: {
                    config: config
                },
                zIndex:999,
            }, function () {
            });
        },
        //单个复选框选中
        checkboxChange(e, index, index1, type) {
            let flagIdx = -1;
            this.checkboxList.find((item, idx) => {
                if (item.type == type && index === item.index && index1 === item.index1) {
                    flagIdx = idx;
                }
            })
            if (flagIdx != -1) {
                if (!e.target.checked) {
                    this.checkboxList.splice(flagIdx, 1);
                }
                return;
            }
            this.checkboxList.push({
                index: index,
                index1: index1,
                type: type
            })
        },
        //获取复选框是否选中
        getCheckBoxValue(index, index1, type) {
            let obj = this.checkboxList.find(item => {
                if (item.type == type && index === item.index && index1 === item.index1) {
                    return true;
                }
            })
            return obj ? true : false;
        },
        //勾选/取消所有复选框
        allChange(e, index, type) {
            if (type == "dimension") {
                if (!this.dimensions[index]) {
                    return;
                }
                for (let i = 0; i < this.dimensions[index].fields.length; i++) {
                    this.checkboxChange({target: {checked: e.target.checked}}, index, i, type);
                }
            } else if (type == "measure") {
                if (!this.measures[index]) {
                    return;
                }
                for (let i = 0; i < this.measures[index].fields.length; i++) {
                    this.checkboxChange({target: {checked: e.target.checked}}, index, i, type);
                }
            }
        },
        showScriptDialog(){
            let self=this;
            let conf = {
                curVm: this,
                data: {}
            }
            ShareDialog.openJavaScriptDialog(conf, function (script) {
                self.$refs.groovySql.insertValue(script);
            })
        },
        groovySql(val){
            this.$refs.groovySql.insertValue(val);
        },
        insertSql(val){
            this.$refs.sql.insertValue(val);
        },
        onMonacoChange(value){
            this.sql = value ;
        },
    },
    watch: {
        tables: function (val, oldVal) {
            this.relatedPartys = [];
            this.relatedPartys.push(...val);
            //去除最后一个
            this.relatedPartys.splice(this.relatedPartys.length - 1, 1);
            this.oldTables = oldVal;
        },
        "mdl.dataSource": function (val) {
            if (!val) {
                this.mdl.dataSource = "";
                this.init();
            }
        },
        dimensions: function (val) {
            this.buildData(val);
        },
        measures: function (val) {
            this.buildData(val);
        },
    }
}
</script>
<style scoped>
.deleteTbp {
    position: relative;
    top: -26px;
    left: 113px;
    color: white;
    text-align: center;
    width: 26px;
    height: 26px;
    background-color: #ff6868;
    border-radius: 0px 2px 2px 0px;
}

.checkbox-slot {
    position: absolute;
    left: 16px;
    top: -5px;
}

.model_decoration {
    text-decoration: line-through;
    color: silver !important;
}

.model_chart {
    display: flex;
}

.neiConfigure {
    padding: 15px;
    overflow: auto;
}

.configureALI {
    display: block;
    width: 150px;
    height: 26px;
    background-color: #e5eaff;
    border-radius: 2px;
    color: #7b91e9;
    line-height: 26px;
    padding: 0px 8px;
    float: left;
    border-left: 3px solid #9babed;
}

.deleteAtto {
    color: #c0c5cc;
    font-size: 20px;
    margin-left: 15px;
    cursor: pointer;
}

.addTo {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 232px;
    background-color: #f5f7fa;
    border-radius: 15px;
    border: solid 1px #dadde0;
    margin-top: 15px;
    cursor: pointer;
}

.exhibition {
    width: 244px;
    height: 26px;
    border: solid 1px #9babed;
    border-radius: 5px 5px 0px 0px;
    margin-left: 120px;
    margin-top: 20px;
    border-bottom: none;
}

.exhibition > span {
    display: block;
    width: 70px;
    margin: auto;
    background: white;
    margin-top: -10px;
    text-align: center;
    color: #9babed;
}

.current {
    flex: 1;
    margin-left: 20px;
    background-color: #e5eaff;
    border-radius: 2px;
    height: 30px;
    line-height: 30px;
    padding: 0px 7px;
    border-left: 3px solid #9babed;
    color: #7b91e9;
    position: relative;
}
.current .current-text{
    padding-left: 10px;
    position: absolute;
    inset: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.association {
    min-height: 400px;
}

.drag {
    line-height: 30px;
}

.iconform {
    color: #9babed;
    margin-right: 8px;
}


.fonz12 {
    font-size: 12px !important;
}

.icon_ringht {
    color: #2e8cff;
    margin-left: 10px;
}

.icon_nextstep {
    position: absolute;
    top: 0px;
    left: 100px;
}

.model_obj {
    margin: 0px 0px 10px 20px;
    cursor: pointer;
    position: relative;
}

.model_content {
    display: flex;
    width: 100%;
    flex: 1;
    height: calc(100% - 296px);
    border-radius: 10px;
}

.model_content > div {
    flex: 1;
    padding-top: 10px;
    height: 100%;
    overflow: auto;
}

.model_content > div:nth-child(1) {
    border-right: 1px solid #dadde0;
}

.model_content > div:nth-child(2) {
    border-right: 1px solid #dadde0;
}

.model_content .ant-collapse-content > .ant-collapse-content-box {
    padding: 10px 5px 0px 18px !important;
}

.model_content .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    padding: 4px 16px 4px 40px !important;
}

.model_content .ant-collapse-header {
    height: 30px !important;
}

.model_content .ant-collapse-borderless {
    background: white !important;
}

.model {
    display: flex;
    width: 100%;
    line-height: 30px;
    color: #808080;
    background-color: #f5f7fa;
    border: solid 1px #dadde0;
    margin-top: 6px;
    font-size: 12px;
}

.model > div:nth-child(1) {
    border-right: solid 1px #dadde0;
}

.model > div {
    flex: 1;
    padding-left: 15px;
}

.report {
    display: flex;
    width: 100%;
    height: 100%;
}

.report > div:nth-child(1) {
    width: 380px;
    height: 100%;
    overflow: auto;
    padding: 15px;
    border-right: 1px solid #e6e8eb;
}

.report > div:nth-child(2) {
    flex: 1;
    padding: 15px 15px 0px 15px;
    overflow: auto;
}

.tables_obj {
    color: #46494d;
    display: flex;
    align-items: center;
    font-size: 14px;
}
.tables_obj::before{
    content: '|';
    color: #1890ff;
    margin-right: 5px;
}

.relick a {
    margin-right: 10px;
}

.ChartDataModelDesign .ant-form-item {
    margin-bottom: 10px !important;
}

.ChartDataModelDesign .ant-menu-vertical {
    border-right: none !important;
}

.dragClass {
    background-color: #dafaf8 !important;
}
.tables-radio-span{
    font-size: 16px;
    line-height: 18px;
    display: flex;
    position: relative;
    top: -1px;
}
</style>
